<template>
  <div style="display: flex; flex-direction: column;">
    <!-- 公告和统计信息 -->
    <el-row :gutter="20" style="margin-bottom: 20px;">
      <el-col :span="6">
        <el-card>
          <el-tabs v-model="activeTab" @tab-click="handleTabClick" class="custom-tabs">
            <el-tab-pane label="全部公告" name="all" style="width: 250px;height: 150px">
              <ul style="list-style-type: none; padding-left: 0;">
                <li style="cursor: pointer;">· 2018年1月8号系统界面优化</li>
              </ul>
            </el-tab-pane>
            <el-tab-pane label="系统公告" name="system" style="width: 250px;height: 170px"></el-tab-pane>
            <el-tab-pane label="公司公告" name="company" style="width: 250px;height: 170px"></el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div style="width: 100%;height: 205px">
            <p>问题及预警</p>
            <div style="display: flex; justify-content: space-around; margin-top: 20px;">
              <div style="text-align: center;">
                <p>84</p>
                <p>问题总数（次）</p>
              </div>
              <div style="text-align: center;">
                <p>0</p>
                <p>预警总数（次）</p>
              </div>
            </div>
            <div style="border-bottom: 1px dashed #ccc;margin-top: 42px;width: 100%;"></div>
            <div style="display: flex; justify-content: space-between; margin-top: 20px; padding-bottom: 5px;">
              <p style="margin: 0;cursor: pointer;">·无</p>
              <p style="margin: 0;cursor: pointer;">2018-01-08</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div style="width: 100%;height: 205px">
            <p>公司工作计划</p>
            <div style="display: flex; justify-content: space-around; margin-top: 20px;">
              <div style="text-align: center;">
                <p>0</p>
                <p>当前计划（个）</p>
              </div>
              <div style="text-align: center;">
                <p>0</p>
                <p>已完成（个）</p>
              </div>
              <div style="text-align: center;">
                <p>0%</p>
                <p>完成率（%）</p>
              </div>
            </div>
            <div style="border-bottom: 1px dashed #ccc;margin-top: 20px;width: 100%;"></div>
            <div style="display: flex; justify-content: space-between; margin-top: 20px; padding-bottom: 5px;">
              <p style="margin: 0;cursor: pointer;">·无</p>
              <p style="margin: 0;cursor: pointer;">2018-01-08</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div style="width: 250px;height: 205px">

            <!-- 添加轮播图 -->
            <el-carousel height="180px">
              <el-carousel-item v-for="item in items" :key="item.src">
                <img :src="item.src" style="width: 100%; height: 100%;">
              </el-carousel-item>
            </el-carousel>

          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 施工现场质量管理 -->
    <div style="margin-bottom: 20px;border-bottom: 1px dashed #ccc;">
      <h3>施工现场质量管理</h3>
    </div>
    <!-- 质量检查统计 -->
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card>
          <div style="font-size: 16px; margin-bottom: 10px;">质量检查统计</div>
          <div ref="qualityChart" style="height: 300px;"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card style="height: 370px">
          <p class="card-header" style="font-size: 16px; margin-bottom: 20px; color: #333;">质量检测统计</p>
          <div class="statistics-container" style="display: flex; justify-content: space-around; width: 100%;">
            <div class="stat-item" style="text-align: center; flex: 1;">
              <p>检测部位</p>
              <p><span class="stat-value" style="font-size: 24px; color: #1e90ff; font-weight: bold;">0个</span></p>
            </div>
            <div class="stat-item" style="text-align: center; flex: 1;">
              <p>检测次数</p>
              <p><span class="stat-value" style="font-size: 24px; color: #1e90ff; font-weight: bold;">0次</span></p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
  <el-row :gutter="20">
    <el-col :span="16">
      <!-- 质量问题统计 -->
      <el-card style="width: 100%; margin-top: 20px; margin-right: 200px">
        <div slot="header" style="font-size: 16px; font-weight: bold;">质量问题统计</div>
        <div style="display: flex; justify-content: space-around;">
          <div id="bie1" style="width: 100%;height: 300px"></div>
          <div id="bie2" style="width: 100%;height: 300px"></div>
          <div id="bie3" style="width: 100%;height: 300px"></div>
        </div>
      </el-card>
    </el-col>
    <!-- 质量检测统计 -->
    <el-col :span="8">
      <el-card style="height: 360px;margin-top: 20px;">
        <div style="font-size: 16px; font-weight: bold;">质量检测统计</div>
        <div style="display: flex; justify-content: space-around;">
          <div id="bie4" style="width: 100%;height: 300px"></div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const activeTab = ref('all');

const handleTabClick = (tab) => {
  console.log('Clicked tab:', tab.name);
};

const qualityChart = ref(null);

onMounted(() => {
  const chartInstance = echarts.init(qualityChart.value);
  const option = {
    xAxis: {
      type: 'category',
      data: ['2025-03-05', '2025-03-06', '2025-03-07', '2025-03-08', '2025-03-09', '2025-03-10', '2025-03-11'],
      boundaryGap: false,
      axisPointer: {
        show: true,
        snap: true
      }
    },
    yAxis: {
      type: 'value',
      min: 0,
      axisLabel: {
        formatter: '{value}'
      }
    },
    series: [
      {
        data: [0, 0, 0, 0, 0, 0, 0],
        type: 'line',
        smooth: true,
        lineStyle: {
          color: '#1e90ff'
        }
      }
    ]
  };

  chartInstance.setOption(option);
});

const bie1 = ref(null);
const bie2 = ref(null);
const bie3 = ref(null);

// 初始化质量问题统计图表
const initBie = (id) => {
  const chartDom = document.getElementById(id);
  const myChart = echarts.init(chartDom);
  const bie1Option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      itemHeight: 8,
      itemWidth: 8,
      top: 'center',
      textStyle: {
        fontSize: 12
      }
    },
    series: [
      {
        name: '整改状态',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '20',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          {value: 90, name: '已整改', itemStyle: {color: '#d9e64f'}},
          {value: 10, name: '待复查', itemStyle: {color: '#00bfa5'}},
          {value: 0, name: '整改中', itemStyle: {color: '#007bff'}}
        ]
      }
    ]
  };

  const bie2Option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      itemHeight: 8,
      itemWidth: 8,
      top: 'center',
      textStyle: {
        fontSize: 12
      }
    },
    series: [
      {
        name: '问题严重程度',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '20',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          {value: 100, name: '一般'},
          {value: 0, name: '较大', itemStyle: {color: '#00bfa5'}},
          {value: 0, name: '严重', itemStyle: {color: '#d9e64f'}}
        ]
      }
    ]
  };
  const bie3Option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      itemHeight: 8,
      itemWidth: 8,
      top: 'center',
      textStyle: {
        fontSize: 12
      }
    },
    series: [
      {
        name: '质量问题',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '20',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          {value: 3, name: '原材料、构配件', itemStyle: {color: '#007bff'}},
          {value: 2, name: '模板工程', itemStyle: {color: '#00bfa5'}},
          {value: 2, name: '混凝土工程', itemStyle: {color: '#d9e64f'}},
          {value: 1, name: '地基与基础', itemStyle: {color: '#ffcc00'}},
          {value: 8, name: '钢筋工程', itemStyle: {color: '#ff6f61'}},
          {value: 7, name: '防水工程', itemStyle: {color: '#a569bd'}},
          {value: 6, name: '钢筋保护层不足', itemStyle: {color: '#3498db'}},
          {value: 2, name: '部分钢筋间距', itemStyle: {color: '#95a5a6'}},
          {value: 40, name: '土方开挖与边坡', itemStyle: {color: '#8e44ad'}},
          {value: 6, name: '直螺纹加工不规范', itemStyle: {color: '#c0392b'}},
          {value: 7, name: '其他', itemStyle: {color: '#34495e'}}
        ]
      }
    ]
  };
  const option = id === 'bie1' ? bie1Option :
      id === 'bie2' ? bie2Option :
          id === 'bie3' ? bie3Option :
              defaultOption;
  option && myChart.setOption(option);

}
//一进入页面就出现图表
onMounted(() => {
  initBie('bie1');
  initBie('bie2');
  initBie('bie3');
})



// 初始化质量检测统计图表
const initBie2 = (id) => {
  const chartDom = document.getElementById(id);
  const myChart2 = echarts.init(chartDom);
  const bie4Option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      itemHeight: 8,
      itemWidth: 8,
      top: 'center',
      textStyle: {
        fontSize: 12
      }
    },
    series: [
      {
        name: '质量问题',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        data: [
          {value: 3600, name: '验收通过'},
          {value: 0, name: '验收未通过'},
        ],


        emphasis: {
          label: {
            show: true,
            fontSize: '20',
            fontWeight: 'bold'
          }
        }
      }
    ]
  };
  bie4Option && myChart2.setOption(bie4Option);
}
//一进入页面就出现图表
onMounted(() => {
  initBie2('bie4');
})


// 轮播图数据
const items = ref([
  { src: 'img/img_1.png' }, // 确保图片文件存在于 public/img 目录下
  { src: 'img/img.png' },     // 确保图片文件存在于 public/img 目录下
  { src: 'img/img_2.png' },
  {src: 'img/img_3.png'}
    // 添加更多图片路径
]);


</script>
